<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>公证</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

    <link rel="stylesheet" href="../../css/amazeui.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body,
    html {
        width: 100%;
        background: #fff !important;
    }

    header {
        text-align: center;
        height: 44px;
        line-height: 44px;
        position: relative;
    }

    .button {
        width: 80%;
        margin: 30px auto;
        display: block;
        outline: none;
    }

    .am-input-group-label {
        background: #fff;
        border: none;
        font-size: 14px;
    }

    .am-form-field {
        border: none;
        text-align: right;
        outline: none;
        padding-right: 16px;
        color: #1197ff;
    }

    .am-input-group {
        position: relative;
        padding:5px 0
    }

    .am-input-group::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #cccccc;
        left: 0;
        transform: scaleY(0.5);
        z-index: 3
    }

    .text-title {
        font-size: 25px;
        padding: 5px 10px;
        border-bottom: 1px solid #ccc
    }

    .am-btn-primary {
        border-radius: 8px;
    }

    .img {
        background-position: 0 0;
        width: 50px;
        height: 50px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: inline-block;
        margin-left: calc(100% - 50px);
        background-color: #ccc;
    }

    .am-form-field {
        height: auto !important;
    }

    .am-form-field>input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
        
    .button {
            width: 90%;
            margin: 30px auto;
            display: block;
            outline: none;
            background: #1197ff;
            border-radius: 5px;
            height: 40px;
        }
        .feil{
            color: #1197ff;
        }
</style>

<body>
    <div class="list_box">
        <div class="am-input-group">
            <span class="am-input-group-label">签字照片（需要当场拍摄）</span>
            <div class="am-form-field">
                <img src="../../images/xiangji.png" alt="">
                <input srcImg="" name="SignPhoto" onchange="ajaxFileUpload(this)" type="file" class="SignPhoto">
            </div>
        </div>
        <div class="am-input-group">
            <span class="am-input-group-label">公证书照片</span>
            <div class="am-form-field">
                <img src="../../images/xiangji.png" alt="">
                <input srcImg="" name="NotarizationPhoto" onchange="ajaxFileUpload(this)" type="file" class="NotarizationPhoto">
            </div>
        </div>
        <div class="am-input-group">
            <span class="am-input-group-label">公证书回执单：</span>
            <div class="am-form-field">
                <img src="../../images/xiangji.png" alt="">
                <input srcImg="" name="Receipt" onchange="ajaxFileUpload(this)" type="file" class="Receipt">
            </div>
        </div>
        <div class="am-input-group">
            <span class="am-input-group-label">身份证对比结果照片：</span>
            <div class="am-form-field">
                <img src="../../images/xiangji.png" alt="">
                <input srcImg="" name="IdCard" onchange="ajaxFileUpload(this)" type="file" class="IdCard">
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">提示</div>
            <div class="am-modal-bd cont">

            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>
    <button class="button am-btn am-btn-primary">提交</button>
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/amazeui.js"></script>
    <script src="../../js/ajaxfileupload.js"></script>
    <style>
        input[readonly="readonly"] {
            background: #fff !important;
        }
    </style>
    <script>


        var SerialNumber = localStorage.getItem('SerialNumber')
        var http = localStorage.getItem('http')
        var UserId = localStorage.getItem('UserId')
        var Access_token = localStorage.getItem('Access_token')
        var Refresh_token = localStorage.getItem('Refresh_token');

        function ajaxFileUpload(th) {
            $('body').append(`<div style="z-index:99999999999999;top:0;
        left:0;position:fixed;width:100%;height:100%;" class="loidn">
                <div style="width:100%;position:absolute;top:50%;left:0%;text-align:center;transform:translateYs(-50%);">图片上传中...</div>
            
            </div>`)
            var thisclass = $(th).attr('class');
            num = 0;
            $.ajaxFileUpload({
                url: 'http://zhikewl.s1.natapp.cc/UploadImgs/DoUpload', //用于文件上传的服务器端请求地址
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: $(th), //文件上传域的ID
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data, status) //服务器成功响应处理函数
                {
                    console.log(JSON.stringify(data))
                    textalert(data.Msg)
                    $('.loidn').remove()
                    if (data.State == true) {
                        data2 = data;
                        num = 1
                    }
                },
                error: function (data, status, e) //服务器响应失败处理函数
                {
                    console.log(data);
                    $('.loidn').remove()

                }
            })

            var time = setInterval(function () {
                if (num == 1) {
                    $('.' + thisclass).attr('srcImg', data2.Obj)
                    $('.' + thisclass).parent().find('img').attr('src', '../../images/yes.svg')
                    console.log($('.' + thisclass).attr('srcImg'));
                    clearInterval(time)
                }
            }, 1)
            return false;
        }

        $(function () {
            $.ajax({
                type: 'GET',
                headers: {
                    "Authorize": Access_token + '|' + Refresh_token,
                    "MemberId": UserId
                },
                url: http + '/api/notarization/GetNotar?keyValue=' + GetQueryString('id'),
                async: false,
                data: {},
                dataType: "json",
                success: function (data) {
                    console.log(JSON.stringify(data))
                    if (data.type == 1) {
                        if (data.resultdata.NotarizationPhoto != null) {
                            $('input[type="NotarizationPhoto"]').attr('srcimg', data.resultdata.NotarizationPhoto);
                            $('input[type="NotarizationPhoto"]').parent().find('img').attr('src', '../../images/yes.svg')
                        }
                        if (data.resultdata.Receipt != null) {
                            $('input[type="Receipt"]').attr('srcimg', data.resultdata.Receipt);
                            $('input[type="Receipt"]').parent().find('img').attr('src', '../../images/yes.svg')
                        }
                        if (data.resultdata.IdCard != null) {
                            $('input[type="IdCard"]').attr('srcimg', data.resultdata.IdCard);
                            $('input[type="IdCard"]').parent().find('img').attr('src', '../../images/yes.svg')
                        }
                        if (data.resultdata.SignPhoto != null) {
                            $('input[type="SignPhoto"]').attr('srcimg', data.resultdata.SignPhoto);
                            $('input[type="SignPhoto"]').parent().find('img').attr('src', '../../images/yes.svg')
                        }
                    }
                },
                error: function (err) {
                    console.log(JSON.stringify(err))
                }
            })
            function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }

            $('.button').click(function () {
                obj = {}
                for (var i = 0; i < $('input[type="file"]').length; i++) {
                    if ($('input[type="file"]').eq(i).attr('srcImg') == "") {
                        var te = $('input[type="file"]').eq(i).parent().parent().find('span').text()
                        $(".cont").text('请上传' + te.replace('：', ''))
                        $('#my-alert').modal('open')
                        $('.button').removeAttr('disabled')
                        return
                    }
                }

                for (var p = 0; p < $('input[type="file"]').length; p++) {
                    var Name = $('input[type="file"]').eq(p).attr('name');
                    var srcImg = $('input[type="file"]').eq(p).attr('srcImg');
                    obj[Name] = srcImg
                }
                obj['UserId'] = UserId

                // e721599f-dfee-45a9-8e9c-7289c9e0eb64

                $.ajax({
                    type: 'POST',
                    url: http + '/api/notarization/SaveNotarization?keyValue=' + GetQueryString('id'),
                    headers: {
                        "Authorize": Access_token + '|' + Refresh_token,
                        "MemberId": UserId
                    },
                    async: false,
                    data: obj,
                    dataType: "json",
                    success: function (data) {
                        console.log(JSON.stringify(data))
                        $(".cont").text(data.message)
                        $('#my-alert').modal('open')
                        if (data.type == 1) {
                            localStorage.setItem('dingdan', 1)
                            window.history.go(-1);
                        }
                    },
                    error: function (err) {
                        console.log(JSON.stringify(err))
                    }
                })
            })
        })
        function textalert(text) {
            $('body,html').css('width', '100%').css('height', '100%');
            var dome =
                `<div style="text-align:center;position:absolute;top:50%;transform:translate(-50%,-50%);border-radius: 5px;background: rgba(0,0,0,0.5);padding: 0.2rem;left: 50%;z-index:9999999999999999999999999;" class="mask_boxcontent">
          <p style="color:#fff;margin:0;">${text}</p>
        </div>`
            $('body').append(dome);
            setTimeout(function () {
                $('.mask_boxcontent').fadeOut(500);
                setTimeout(function () {
                    $('.mask_boxcontent').remove();
                }, 500)
            }, 2000)
        }
    </script>
</body>

</html>